<template>
  <div class="wrapper">
    <div v-for="(item,index) in data" :key="index" class="item">
      <div class="section">
        <div class="title">{{item.title}}</div>
        <div v-for="(subitem,sindex) in item.items" :key="sindex" class="content-wrapper">
          <div class="lable">{{subitem.title}}</div>
          <div class="data">{{subitem.data}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    props: {
      data: Array,
    }
  }
</script>
<style lang="less" scoped>
  .wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px;
    box-shadow: 0 0 50px #00D6FF;

    .section{
      margin-bottom: 16px;
      .title{
        font-size: 16px;
        color:#fff;
        margin-bottom: 2px;
      }
      .content-wrapper{
        display: flex;
        flex-direction: row;
        .lable{
          font-size: 13px;
          color:#00D6FF;
          line-height: 1.8;
        }
        .data{
          font-size: 13px;
          color:orange;
          line-height: 1.8;
          margin-left: 8px;
        }
      }
      :last-child{
        margin-bottom: 0px;
      }
    }
  }
</style>
